.button-theme {
  position: relative;
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  .front {
    position: absolute;
    left: 8rem;
    top: 10rem;
    display: inline;
    z-index: 10;
    animation: clouds 8s infinite;
    animation-timing-function: ease-in-out;
    cursor: pointer;

    .right-front {
      width: 2.5rem;
      height: 2.5rem;
      margin-left: -1.5rem;
      border-radius: 50% 50% 50% 0%;
      display: inline-block;
      background-color: #4c9beb;
      box-shadow:
        0 0 20px rgba(0, 0, 0, 0.1),
        0 0 6px rgba(0, 0, 0, 0.05);
      z-index: 5;
    }

    .left-front {
      width: 3.25rem;
      height: 3.25rem;
      display: inline-block;
      border-radius: 50% 50% 0% 50%;
      background-color: #4c9beb;
      box-shadow:
        0 0 20px rgba(0, 0, 0, 0.2),
        0 0 6px rgba(0, 0, 0, 0.1);
      z-index: 5;
    }
  }

  .back {
    position: absolute;
    left: 13rem;
    top: 6rem;
    z-index: 10;
    animation: clouds 12s infinite;
    animation-timing-function: ease-in-out;
    cursor: pointer;

    .right-back {
      width: 2.25rem;
      height: 2.25rem;
      margin-left: -0.875rem;
      border-radius: 50% 50% 50% 0%;
      display: inline-block;
      background-color: #4c9beb;
      box-shadow:
        0 0 20px rgba(0, 0, 0, 0.1),
        0 0 6px rgba(0, 0, 0, 0.1);
      z-index: 5;
    }

    .left-back {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50% 50% 0% 50%;
      display: inline-block;
      background-color: #4c9beb;
      box-shadow:
        0 0 20px rgba(0, 0, 0, 0.2),
        0 0 6px rgba(0, 0, 0, 0.1);
      z-index: 5;
    }
  }

  .sun {
    width: 9rem;
    height: 9rem;
    background: #ffd662;
    border-radius: 50%;
    display: inline;
    position: absolute;
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.06);
    cursor: pointer;
  }

  @keyframes clouds {
    0% {
      transform: translateX(1rem);
    }

    50% {
      transform: translateX(0rem);
    }

    100% {
      transform: translateX(1rem);
    }
  }
}
